<template>
	 <view class="status-record" v-if="afterSaleDO.length">
	    <text>当前状态</text>
	    <view class="status-record__steps">
			
	      <view :class="'step-item ' + getStatus(item,i)"  v-for="(item,i) in afterSaleDO" :key="i">
			<uni-icons class="step-item__icon" v-if="item.isEnd=='1'" type="checkbox" color="#277EEF" size="20"></uni-icons>
			
			<view class="step-item__icon" v-if="item.memberAgreeMerchant=='0' && i==1" style="background-color: #fff;">
				<u-icon name="minus-circle" color="#277EEF" size="18"></u-icon>
			</view>
	        <view class="step-item__content">
	          <text>{{item.stage}}</text>
	          <text class="step-item__content--time">{{item.stageTime | formatDate}}</text>
	        </view>
	        <view class="step-item__reason">
				<view class="">
					{{item.remark || ''}}
				</view>
				<view v-if="item.stage.includes('待客户')>0" class="btn" @click="handleSubmit('agreeAfter')"> 同意 </view>
				<view v-if="item.stage.includes('待客户')>0" class="btn" @click="handleSubmit('agreeNoAfter')"> 不同意 </view>
			</view>
	      </view>
	
	     
	    </view>
	  </view>
</template>

<script>
	import {orderAfterAgreeAPI} from "@/api/order.js"
	export default {
		name:"statusRecord",
		props: {
			 afterSaleDO:{
				 type:Array,
				 default:()=> []
			 },
			ids:{
				type:String,
				default:""
			}
		},
		 
		data() {
			return {
				visible:false,
				orderId:-1, 
				checked:[],
				reasonList :[]
			};
		},
		watch:{
			ids(val){
				console.log(val,'....................')
				this.orderId=val	
			}
		} ,
		mounted() {
			this.orderId=this.ids
			console.log(this.ids,'....................')
		},
		methods:{
			getStatus(item,i){
				if(i==0){
					 return ''
				} else{
					if(item.stage=="待客户确认" || item.remark=="待商户处理" || item.remark=="待平台处理"){
						return 'step-item--loading'
					}
					
					if(item.memberAgreeMerchant==0 || item.stage=="商户处理方案"){
						return 'step-item--success'
					} 
				 
					if(item.isEnd=="1" ){
						return 'step-item--success'
					}
				}
				
				
				
				
			},
			handleSubmit(type){
				 orderAfterAgreeAPI(type,{orderId:this.ids}).then(res=>{
					uni.showToast({
						title:type=='agreeAfter'?'同意售后':'不同意售后'
					})
					this.$emit("getinfo")
				 })
			},
			
			/*
			@description 回调事件
			*/ 
			handleChange(){
				if(this.checked.length){
					this.visible=false
					this.$emit("handleChange",this.checked)
				}else{
					uni.showToast({
						title:'请选择原因',
						icon:'none'
					})
				}
				 
			}
		}
	}
</script>


<style lang="scss" scoped>
.status-record {
  padding:20rpx ;
  display: flex;
  & > text {
   font-weight: 500;
   font-size: 28rpx;
   color: #AAAAAA;
   margin-right: 20rpx;
  }
  &__steps {
    flex: 1 0 0;
    position: relative;
    top: 10rpx;
    .step-item {
      padding-left: 34rpx;
      padding-bottom: 60rpx;
      position: relative;

      &::before {
        content: '';
        width: 18rpx;
        height: 18rpx;
        position: absolute;
        top: 0;
        left: -10rpx;
        background-color: $uni-color-primary;
        border-radius: 50%;
      }
      &--success::before {
        display: none;
      }
	  &--loading::before {
	    content: '';
	    width: 18rpx;
	    height: 18rpx;
	    position: absolute;
	    top: 0;
	    left: -10rpx;
	    background-color:#AAAAAA;
	    border-radius: 50%;
	  }
      &:not(:last-child) {
        border-left: 2rpx dashed $uni-color-primary;
      }
      &__content {
        position: relative;
        top: -10rpx;
        text {
          &:first-child {
            color: #AAAAAA;
            margin-right: 20rpx;
          }
        }
        &--time {
          color: #AAAAAA;
          font-size: 24rpx;
        }
      }
      &__reason {
        color: #333;
        margin-top: 10rpx;
		display: flex;
		align-items: center;
		.btn{
			width: 114rpx;
			margin: 0 10rpx;
			border-radius: 38rpx;
			border: 1rpx solid #AAAAAA;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 56rpx;
			text-align: center;
		}
      }
      &__icon {
        position: absolute;
        top: -10rpx;
        left: -21rpx;
      }
    }
  }
}
</style>
